<template>
    <el-container>
        <el-header>
            <navigation :current="current" :comments="comments" />
        </el-header>
        <el-main>
            <el-container>
                <el-aside>
                    <el-carousel :interval="5000" arrow="always">
                        <el-carousel-item v-for="item in hot" :key="item.id">
                            <template #default>
                                <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
                                    <img :src="url + item.image" alt="">
                                    <!-- <el-img :src='url' :fit='contain' style="width: 100px; height: 100px;background-color:aqua"/> -->
                                    <div class="text">
                                        <p>书名:{{ item.bookName }}</p>
                                        <p>作者:{{ item.author }}</p>
                                        <p class="content">简介:{{ item.content }}</p>
                                        <p>评分:{{ item.scoreAvg }}</p>
                                    </div>
                                </el-card>
                            </template>
                        </el-carousel-item>
                    </el-carousel>
                </el-aside>
                <el-main>
                    <el-carousel :interval="5000" arrow="always">
                        <el-carousel-item v-for="book in hotScore" :key="book.id">
                            <template #default>
                                <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
                                    <img :src="url + book.image" alt="">
                                    <!-- <el-img :src='url' :fit='contain' style="width: 100px; height: 100px;background-color:aqua"/> -->
                                    <div class="text">
                                        <p>书名:{{ book.bookName }}</p>
                                        <p>作者:{{ book.author }}</p>
                                        <p class="content">简介:{{ book.content }}</p>
                                        <p>评分数:{{ book.scoreCount }}</p>
                                    </div>
                                </el-card>
                            </template>
                        </el-carousel-item>
                    </el-carousel>
                </el-main>
            </el-container>
            <user />
            <book />
            <types />
            <score />
        </el-main>
    </el-container>
</template>

<script>
import axios from 'axios'
import navigation from './Navigation.vue'
import user from './echarts/User.vue'
import book from './echarts/Book.vue'
import types from './echarts/Type.vue'
import score from './echarts/Scores.vue'

export default {
    components: {
        navigation,
        user,
        book,
        types,
        score
    },
    data() {
        return {
            current: '首页',
            comments: [
                '首页',
                '数据监控',
            ],
            hot: [],
            hotScore:[],
            url: "http://localhost:8080/image/"
        }
    },
    methods: {
        findHotBook() {
            axios.get('http://localhost:8080/book/hot')
                .then(data => {
                    this.hot = data.data.data;
                })
                .catch();
        },
        findHotScore() {
            axios.get('http://localhost:8080/book/hotScore')
                .then(data => {
                    this.hotScore = data.data.data;
                })
                .catch();
        }
    },
    mounted() {
        this.findHotBook();
        this.findHotScore();
    },
}
</script>

<style scoped>
.el-header {
    width: 100%;
    height: 40px;
    line-height: 40px;
}

.el-card {
    height: 300px;
}

.el-card img {
    width: 30%;

}

.el-aside {
    width: 50%;
    height: 100%;
}

.content {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 4.5em;
}

.el-main {
    padding: 0;
    margin: 0 10px;
}


.text {
    float: right;
    width: 60%;
    height: 9em;
    margin: 50px 20px;

}
</style>